<template>
    <div id="index">
        <router-view/>
        <yd-tabbar slot="tabbar" class="tabbar_list" activeColor='#c7000a' :fixed='true'>
            <yd-tabbar-item class="tabbar_left" link="/" :active="isActive[0]">
                <yd-icon name="home-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item class="tabbar_center" title="爱心助力" link="/love" :active="isActive[1]">
                <yd-icon name="like-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <!-- <yd-tabbar-item class="tabbar_center" v-show="memberDetail == 1" title="财富生活" link="/wealth" :active="isActive[2]">
                <yd-icon name="caifu" custom slot="icon"></yd-icon>
            </yd-tabbar-item> -->
            <!-- <yd-tabbar-item class="tabbar_center" title="品质生活" link="/quality" :active="isActive[3]">
                <yd-icon name="jiaju-copy" custom slot="icon"></yd-icon>
            </yd-tabbar-item> -->
            <yd-tabbar-item class="tabbar_center" title="品质生活" link="" :active="isActive[3]"  @click.native="quality">
                <yd-icon name="jiaju-copy" custom slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item class="tabbar_right" link="/me" :active="isActive[4]">
                <yd-icon name="unie608" custom slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>
    </div>
</template>

<script>

export default {
    name: 'index',
    data() {
        return {
            isActive: [true],
            memberDetail: 0
        }
    },
    created: function() {
        this.love();
        // this.memberDetails();
    },
    methods: {
        memberDetails() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/memberDetail')
                .then((response) => {
                    if (response.status == 200) {
                        let email = response.data.object.memberEmail;
                        if (email.indexOf('cofco.com') > 0) {
                            this.memberDetail = 1;
                        }
                    }
                })
        },
        love() {
            let num = this.$store.state.love;
            this.isActive = [];
            this.$set(this.isActive, num, true);
        },
        quality() {
            // this.$router.push('/quality');
            this.$dialog.toast({mes: '改版中，敬请期待！', timeout: 1000});
        }
    },
    watch: {
        '$store.state.love': 'love',
        // '$store.state.memberDetail': 'memberDetails',
    }
}
</script>

<style scoped>
#index {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: auto;
    position: relative;
    padding-bottom: 0.95rem;
}

#index .tabbar_left {
    height: 100%;
    flex: 0.55;
    position: relative;
}

#index .tabbar_left:before {
    content: '';
    width: 1px;
    background: #BABABA;
    height: 1rem;
    right: 0;
    top: -0.1rem;
    position: absolute;
}

#index .tabbar_right {
    height: 100%;
    flex: 0.55;
    position: relative;
}

#index .tabbar_right:before {
    content: '';
    width: 1px;
    background: #BABABA;
    height: 1rem;
    left: 0;
    top: -0.1rem;
    position: absolute;
}
</style>
<style>
#index .tabbar_list .tabbar_center {
    flex-direction: inherit;
}

#index .yd-tabbar {
    height: 1rem;
}

#index .yd-tabbar-txt {
    line-height: 0.28rem;
    padding: 0 0.1rem;
}

#index .yd-tabbar-icon i {
    font-size: 0.4rem!important;
}

.tabbar_list [class^="icon-custom-"]:before,
[class*=" icon-custom-"]:before {
    font-size: 0.4rem!important;
}

.tabbar_list .yd-tabbar-fixed {
    bottom: -1px;
}
</style>